<template>
  <div id="PickingByOrder_new">
    <root name="PickingByOrder_new">
      <SafeHeader
        v-bind="{
          title: '按单拣货',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 任务 </v-tab>
        <v-tab class="wms-tab"> 拣货 </v-tab>
        <!-- 任务页面 -->
        <v-tab-item class="task" transition="slide-y-transition" style="height: calc(100% - 40px)">
          <v-container
            class="my-4 white lighten-5 py-2"
            style="line-height: 1.75rem"
          >
            <v-row class="mt-0">
              <v-col cols="3" class="py-2 d-flex align-center card-lable">
                <span>任务号 </span>
              </v-col>
              <v-col class="py-1">
                <v-text-field
                  class="my-0"
                  dense
                  hide-details
                  @keydown.13="taskCodeSearch"
                  v-model="outBillForm.billNo"
                  placeholder="可按出库任务号查询"
                >
                </v-text-field>
              </v-col>
            </v-row>
            <!-- <v-row class="mt-1">
              <v-col cols="3" class="py-2 card-lable"> 状态 </v-col>
              <v-col class="py-2 card-value">{{ outBillForm.state }}</v-col>
            </v-row> -->
            <v-row class="mt-1">
              <v-col cols="3" class="py-2 card-lable"> 计划日期 </v-col>
              <v-col class="py-2 card-value">{{
                outBillForm.createTime
              }}</v-col>
            </v-row>
          </v-container>
          <v-container class="task_list white">
            <v-row>
              <v-col
                cols="12"
                class="card-title"
                style="padding-bottom: 8px; padding-top: 8px"
                >出库任务明细列表</v-col
              >
            </v-row>
            <v-divider class="mb-2"></v-divider>
            <div v-if="outBillForm.details[0]">
              <v-container
                v-for="(item, index) in outBillForm.details"
                :key="index"
              >
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料编码</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料名称</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemName
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >计划数量</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.orderQuantity
                          }}</v-col>
                        </v-row>
                        <v-divider class="mt-1 mb-2"></v-divider>
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            align-center
                            pt-1
                          "
                        >
                          <v-col
                            cols="4"
                            class="py-1 card-lable"
                            style="color: #323333"
                            >已拣数量</v-col
                          >
                          <v-col class="py-1 card-value" style="color: #ffc352">
                            {{
                              item.pickQuantity ? item.pickQuantity : 0
                            }}</v-col
                          >
                          <v-col cols="3" class="d-flex justify-end py-1">
                            <v-btn
                              rounded
                              small
                              color="#193690"
                              dark
                              @click="picking(item)"
                              >拣货</v-btn
                            >
                          </v-col>
                        </v-row>
                      </v-card-subtitle>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </div>

            <v-row v-else>
              <v-col cols="12" class="text-center">暂无数据</v-col>
            </v-row>
          </v-container>
          <div v-show="hidshow"  class="footer">
            <v-bottom-navigation
            
              grow
              style="background: transparent; box-shadow: none"
              class="navigationBtns"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
                  style="background: transparent"
                >
                  <v-btn
                    class="wms-submit-btn"
                    block
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                    "
                    @click="sourceOrderQuery"
                    >源单查询</v-btn
                  >
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
        </v-tab-item>
        <!-- 拣货页面 -->
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <v-container class="mt-2 pa-0">
            <v-card class="pickingCard" height="238">
              <v-row class="ma-0 pa-3" style="height: 38px">
                <v-col cols="12" class="d-flex justify-space-between">
                  <div
                    class="d-flex justify-space-between align-center"
                    style="width: 100%"
                  >
                    <div class="pickingCard_title">
                      {{ currentSoDetailItem.itemName }}
                    </div>
                    <div class="pickingCard_title">
                      待拣数量：{{ currentSoDetailItem.currentUnPickQty }}
                    </div>
                  </div>
                </v-col>
              </v-row>
              <v-divider></v-divider>
              <v-row class="ma-0 pa-0">
                <v-col cols="12">
                  <v-data-table
                    fixed-header
                    hide-default-header
                    height="200"
                    :headers="recommendheaders"
                    :items="recommendList"
                    mobile-breakpoint="1"
                    class="elevation-1 boxCodeDialog_card_table"
                    hide-default-footer
                    item-key="lotCode"
                  >
                    <template v-slot:[`item.state`]="{ item }">
                      <v-simple-checkbox
                        v-model="item.state"
                        disabled
                      ></v-simple-checkbox>
                    </template>
                    <!-- <template v-slot:[`item.state`]="{ item }">
                      <v-chip small class="ma-0" color="#627AEC" label dark>
                        {{ item.state == 2 ? "已拣" : "未拣" }}
                      </v-chip>
                    </template> -->
                  </v-data-table>
                </v-col>
              </v-row>
            </v-card>
          </v-container>
          <v-container class="mt-3 py-1 px-0 pickingCard-bottom">
            <v-form v-model="pickingForm" ref="pickingForm" class="pickingForm">
              <v-row class="pa-1 mt-2">
                <v-col cols="12">
                  <v-text-field
                    label="拣货容器"
                    @keydown.13="handleEnterCtCode"
                    clearable
                    dense
                    v-model="pickForm.srcBoxCode"
                    placeholder="请输入或扫描拣货容器码"
                  ></v-text-field>
                </v-col>
                <v-col cols="12 mt-1">
                  <v-text-field
                    :disabled="targetCtCodeDisabled"
                    id="id-toBoxCode"
                    label="目标容器"
                    dense
                    v-model="pickForm.toBoxCode"
                    placeholder="请输入或扫描目标容器码"
                  >
                    <template v-slot:append>
                      <v-btn
                        rounded
                        outlined
                        small
                        @click="generateBoxCode"
                        color="#193690"
                        >生成</v-btn
                      ></template
                    >
                  </v-text-field>
                </v-col>
                <v-col cols="12 mt-1">
                  <v-text-field
                    id="id-pickQty"
                    :disabled="targetCtCodeDisabled"
                    label="拣货数量"
                    dense
                    type="number"
                    v-model="pickForm.actQuantity"
                    placeholder="请输入需要拣货的数量"
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-container>
          <v-container
            style="font-size: 13px; color: #979899"
            class="py-1 mb-15"
          >
            提示：整箱拣货只需要扫描拣货容器；分箱拣货需要额外扫描目标容器及输入需要拣货的数量
          </v-container>

          <div v-show="hidshow" class="footer">
            <v-bottom-navigation
              height="60"
              style="background: transparent; box-shadow: none"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="
                    pa-0
                    ma-0
                    d-flex
                    justify-space-between
                    align-center
                    mb-2
                    px-2
                    py-1
                  "
                  style="background: transparent"
                >
                  <v-btn
                    class="wms-submit-btn btn-left"
                    color="#193690"
                    dark
                    outlined
                    style="
                      height: 100%;
                      border-radius: 10px;
                      width: 30%;
                      color: #193690 !important;
                    "
                    @click="pickingReturn"
                    >返回
                  </v-btn>
                  <v-btn
                    class="wms-submit-btn"
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                      width: 65%;
                    "
                    @click="pickingSubmit"
                    >提交</v-btn
                  >
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
          <v-dialog v-model="msgDialog" persistent max-width="290">
            <v-card class="boxCodeDialog_card">
              <v-card-title
                class="boxCodeDialog_card_title msgDialog_card_title"
              >
                原因详情
              </v-card-title>
              <v-card-text>
                <v-textarea
                  v-model="msgData"
                  solo
                  name="input-7-4"
                  label="请描述不按推荐拣货的原因"
                ></v-textarea>
              </v-card-text>
              <v-card-actions>
                <v-btn
                  block
                  dark
                  color="#ffc352"
                  @click="msgDialog_card_submit"
                >
                  提交
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-tab-item>
      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import _ from "lodash";
import { apiList } from "@/static/apiList";
import Storage from "@/utils/storage.js";

export default {
  name: "PickingByOrder_new",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      tab: null,
      // tab1 出库任务表单
      outBillForm: {
        billId: "", //出库任务id
        billNo: "", // 出库任务号
        state: "", // 状态
        createTime: "", // 计划日期
        details: [], //出库任务明细列表
      },

      // 当前选中的SO明细
      currentSoDetailItem: {},

      // 拣货任务
      recommendList: [],

      // 推荐库位表头
      recommendheaders: [
        { text: "推荐库位", value: "cellCode" },
        { text: "推荐容器", value: "boxCode" },
        { text: "拣货数量", value: "pickQuantity" },
        { text: "状态", value: "state" },
      ],

      // 选择的容器多批次列表
      pickingForm: true,

      rules: {
        ctCodeRules: [(v) => !!v || "请扫描或输入拣货容器编码"],
        targetCtCodeRules: [(v) => !!v || "请扫描或输入目标容器编码"],
        prePickQtyRules: [(v) => !!v || "请输入需要拣货的数量"],
      },

      // 需要提交的数据
      pickForm: {
        pickTaskId: "", //拣货任务id
        pickQuantity: "", //拣货数量 理论推荐的数量
        srcBoxCode: "", //来源容器
        toBoxCode: "", //目标容器
        actQuantity: "", //实际输入的拣货数量  用于校验
        isAllPick: true,
      },

      targetCtCodeDisabled: true,
      msgDialog: false, // 原因弹框
      msgData: "", // 原因详情
    };
  },
  methods: {
    getColor(item) {
      if (item == 0) {
        return "red";
      } else {
        return "yellow";
      }
    },
    // 源单查询
    sourceOrderQuery() {
      // 进入出库单列表
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: "DeliveryOrderList2",
          url: "./DeliveryOrderList2.html",
        });
      } else {
        this.$root.api.api.openWin({
          name: "DeliveryOrderList2",
          url: "./DeliveryOrderList2.html",
        });
      }
      console.log("sourceOrderQuery");
    },
    // -----------------------任务页面 S -------------------
    //   出库单号回车
    taskCodeSearch() {
      if (!this.outBillForm.billNo) {
        window.api.toast({
          msg: "请先确认任务单号",
          location: "middle",
          duration: 3000,
        });
        return false;
      }
      let params = {
        billNo: this.outBillForm.billNo,
      };
      this.overlay = true;
      wms.get({ url: "/so/masters/findByBillNo", data: params }).then((res) => {
        if (res.status == 200 && res.data.code == 200) {
          if (_.isEmpty(res.data.data)) {
            alert("为查询到对应的出库任务:" + this.outBillForm.billNo);
            this.overlay = false;
            return false;
          }
          let soData = res.data.data;
          this.outBillForm.createTime = soData.createTime;
          wms
            .get({
              url: "/so/details/list",
              data: params,
            })
            .then((res) => {
              if (res.status == 200 && res.data.code == 200) {
                let resData = res.data.data.list;
                console.log(JSON.stringify(resData));
                this.outBillForm.details = resData;
                this.overlay = false;
              } else {
                alert(res.data.message);
                this.overlay = false;
              }
            });
        } else {
          alert(res.data.message);
          this.overlay = false;
        }
      });
    },
    // 拣货按钮
    // 通过物料编码this.currentSoDetailItem.itemCode 查询推荐库位
    picking(item) {
      this.overlay = true;
      //Tab跳转
      this.tab = 1;
      //待拣的物料详情
      this.currentSoDetailItem = item;
      this.currentSoDetailItem.currentUnPickQty = this.currentSoDetailItem.allottedQuantity - this.currentSoDetailItem.pickQuantity;
      //获取拣货任务
      wms
        .get({
          url: "/pick/tasks/findByDetailId",
          data: { soDetailId: item.soDetailId },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let pickData = res.data.data;
            for (let i = 0; i < pickData.length; i++) {
              if (pickData[i].state == 2) {
                pickData[i].state = true;
              } else {
                pickData[i].state = false;
              }
            }
            this.recommendList = pickData;
            // console.log(JSON.stringify(this.recommendList));
            this.overlay = false;
          } else {
            this.overlay = false;
          }
        });
    },
    // -----------------------任务页面 E -------------------

    // -----------------------拣货页面 S -------------------
    // 提交返回
    pickingReturn() {
      this.pickViewItem = {
        pickTaskId: "",
        itemCode: "", // 物料编码
        itemName: "", // 物料编码
        boxCode: "", // 推荐容器
        cellCode: "", // 所属库位
        pickQuantity: "", // 容器内数量
        pickQty: "", // 拣货数量
      };
      this.$refs.pickingForm.reset();
      this.tab = 0;
    },

    //生成容器
    generateBoxCode() {
      //校验是否已经录入数据
      this.overlay = true;
      wms
        .get({ url: "/box/infos/generate", data: { count: 1 } })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let ctBoxList = res.data.data;
            this.pickForm.toBoxCode = ctBoxList[0];
            this.overlay = false;
          } else {
            this.overlay = false;
          }
        });
    },

    // 拣货容器查询
    handleEnterCtCode() {
      //拣货容器
      let srcBoxCode = this.pickForm.srcBoxCode;
      this.recommendList.forEach((item) => {
        if (item.boxCode == srcBoxCode) {
          this.pickForm.pickTaskId = item.pickTaskId;
          this.pickForm.pickQuantity = item.pickQuantity;
        }
      });
      //查询容器库存
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/getBoxStock",
          data: { boxCode: this.pickForm.srcBoxCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let invt = res.data.data;
            console.log(JSON.stringify(invt));
            //判断是不是整个容器都拣
            if (invt.quantity == this.pickForm.pickQuantity) {
              this.pickForm.isAllPick = true;
            } else {
              this.pickForm.isAllPick = false;
              //需要输入目标容器和数量
              this.targetCtCodeDisabled = false;
              document.getElementById("id-toBoxCode").focus();
            }
            this.overlay = false;
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // -----------------------拣货页面 容器详情 S -------------------
    // 拣货容器选择后提交-表格
    boxCodeDialog_table_submit() {
      // 如果是需要目标容器 就解开
      this.targetCtCodeDisabled = false;
      this.boxCodeDialog = false;
    },

    // -----------------------拣货页面 容器详情 E -------------------
    // 拣货提交
    pickingSubmit() {
      //校验提交的数量必须要等于推荐的数量
      if (
        this.pickForm.actQuantity &&
        this.pickForm.actQuantity != this.pickForm.pickQuantity
      ) {
        alert(
          "实际拣货数量[" +
            this.pickForm.actQuantity +
            "]不等于计划拣货数量[" +
            this.pickForm.pickQuantity +
            "]"
        );
        return false;
      }

      //更新拣货数量
      this.currentSoDetailItem.currentUnPickQty -= this.pickForm.actQuantity;

      let params = {
        wareId: localStorage.getItem("wareId"),
        pickTaskId: this.pickForm.pickTaskId,
        pickQuantity: this.pickForm.pickQuantity,
        srcBoxCode: this.pickForm.srcBoxCode,
        toBoxCode: this.pickForm.toBoxCode,
      };

      console.log(JSON.stringify(params));
      this.overlay = true;
      wms
        .post({
          url: "/pick/tasks/commitPick",
          data: params,
        })
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            //提交成功
            this.pickForm = {};
            this.overlay = false;
            window.api.toast({ msg: "拣货成功", location: "middle" });
            this.picking(this.currentSoDetailItem);
            //回写已拣货数量
            for (let i = 0; i < this.outBillForm.details; i++) {
              if (
                this.outBillForm.details[i].itemCode ==
                this.currentSoDetailItem.itemCode
              ) {
                this.outBillForm.details[i].quantity +=
                  this.pickForm.pickQuantity;
                break;
              }
            }
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // 原因详情提交
    msgDialog_card_submit() {
      this.currentSoDetailItem.msg = this.msgData;
      this.msgDialog = false;
      this.pickingReturn();
      // 将表单通过请求提交 this.currentSoDetailItem
    },
    // -----------------------拣货页面 E -------------------
  },
  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
    let pageParam;
    // 页面参数
    if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      pageParam = window.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;

      window.api.addEventListener(
        {
          name: "PickingByOrder_two",
        },
        (res) => {
          console.log(res.value.billNo);
          this.outBillForm.billNo = res.value.billNo;
          this.outBillForm.billId = res.value.billId;
          this.taskCodeSearch();
        }
      );
      // 浏览器
    } else {
      pageParam = this.$root.api.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;
      this.$root.api.api.addEventListener(
        {
          name: "PickingByOrder_two",
        },
        (res) => {
          console.log(res.value.billNo);
          this.outBillForm.billNo = res.value.billNo;
          this.taskCodeSearch();
        }
      );
    }
  },
};
</script>


<style lang="scss" scoped>
.v-tabs {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  ::v-deep .v-tabs-items {
    flex: 1;
    background-color: transparent;
    .v-window__container{
      height: 100%;
    }
  }
}

.footer {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.footer1 {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.list_content {
  flex-direction: column;
  padding: 8px;
  min-height: 5rem;
  .col {
    padding: 2px;
    min-height: 1rem;
    text-align: right;
  }
  .row {
    margin: 0;
    background-color: transparent !important;
  }
  .card-lable {
    text-align: left;
  }
  .card-value {
    text-align: left;
  }
}

.task {
  padding-bottom: 56px;
  &_from {
    background-color: #fff;
    margin-bottom: 6px;
    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;
      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;
        .col {
          padding-bottom: 6px;
        }
      }
    }
    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;
      .col {
        padding: 6px 8px;
      }
    }
  }
}
.v-card__subtitle {
  display: flex;
  margin: 0;

  .row {
    margin: 0;
    background-color: #fff;
    .col {
      min-height: 1rem;
      padding: 8px;
    }
    .receiving_heard {
      border-top: 1px solid grey;
      font-size: 16px;
      font-weight: bold;
    }
    .row {
      background-color: inherit;
    }
  }
}

.v-card__text {
  padding: 0 10px !important;
  .row {
    margin: 0;
  }
  .col {
    padding: 8px;
    ::v-deep.v-input__prepend-outer {
      min-width: 2rem;
      margin-top: 10px;
    }
  }
}
.pickingCard {
  // background-color: skyblue;
  border-radius: 8px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%), 3px 3px 6px rgb(0 0 0 / 14%),
    3px 3px 6px rgb(0 0 0 / 12%) !important;
  .col {
    padding: 0;
  }
  .row {
    margin: 0;
    .col {
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      color: #979899;
    }
    .pickingCard_title {
      font-size: 15px;
      font-weight: bold;
      color: #f8a73c;
    }
  }
  .v-input--selection-controls {
    margin-top: 8px;
  }
  // 10px 10px 5px #888888
}
.pickingCard-bottom {
  background-color: #fff;
  .col {
  }
}
.btn-left {
  background-color: #fff !important;
  ::v-deep.v-btn__content {
    color: #193690 !important;
  }
}
.pickingForm {
  .row {
    margin: 0;
    .col {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}

.pickingWrap {
  padding-bottom: 66px;
}

::v-deep.navigationBtns .navigationBtns_return .v-btn__content {
  color: #193690;
}

::v-deep.v-bottom-navigation .v-btn__content {
  color: #fff;
  font-size: 1rem;
}

.inputPlaceholder ::v-deep.v-text-field__slot input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
  font-size: 15px;
}
.boxCodeDialog_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .boxCodeDialog_card_title {
    width: 100%;
    padding-top: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc352;
    color: #fff;
    // padding: 12px 24px 8px !important;
  }
  .v-card__text {
    margin-top: 12px;
    flex: 1;
  }
  .boxCodeDialog_card_table {
    ::v-deep .text-start {
      padding: 0 8px !important;
    }
  }
  .v-card__actions {
    width: 100%;
  }
  .msgDialog_card_title {
    padding: 12px 24px 10px !important;
  }
}
</style>